<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import WorldCom from '@/components/ThreeJS/WorldCom/WorldCom.vue'
import { useUserStore } from '@/stores/user'
import { headersStore } from '@/stores/apiHeader'
import { useRouter } from 'vue-router'
// import { getAllPoint } from '@/Utils/EarthCompositionAPI'
import api from '@/api'

const { userInfo } = useUserStore() as any
const threeMapId = ref(null) // 实例化地球
const router = useRouter()
const currentPath = router.currentRoute.value.path
const headerStore = headersStore()

const earthData = reactive({
  coordinates: [],
  pointArray: [],
  rotation: '关闭旋转',
})

const inFoEarthData = async (isRotation?) => {
  if (!useUserStore().token) return
  const params = {
    scopeCode: headersStore().point_code,
    bussinessCode: userInfo.bussinessCode,
    financeCode: userInfo.financeCode,
    supplyCode: userInfo.supplyCode,
    humanCode: userInfo.humanCode,
  }
  const res = await api.getInitEarthInfo(params)
  const { code, data } = res

  if (code == 0 && data) {
    earthData.coordinates = data.coordinates
    earthData.pointArray = data.pointArray
    infoEarth(isRotation)
  }
}

// 初始地球
const infoEarth = (isRotation?: true) => {
  if (!threeMapId.value) return
  setTimeout(() => {
    infoMap() // 添加光圈标记点
    createAreaPoint() // 添加图片点位标签
    if (currentPath == '/supply' || currentPath == '/world') {
      flyLineChange() // 添加飞线
    }
    setTimeout(() => {
      if (isRotation) {
        threeMapId.value.rotation(true)
      } else {
        threeMapId.value.rotation(false)
      }
    }, 1000)
  }, 1000)
}

// 清理地球
const clearEarth = (isRotation?: false) => {
  // 旋转
  threeMapId.value.rotation(isRotation)
  // 清理地球
  delInfoMarks()
  delAreaPoint()
  delFlyLineChange()
  // 重新渲染
  inFoEarthData(isRotation)
}
window['clearEarth'] = clearEarth

onMounted(() => {
  inFoEarthData(true)

  // 测试获取全球所有点
  // getAllPoint()
})

watch(
  () => [
    headerStore.$state.year,
    headerStore.$state.month,
    headerStore.$state.language_id,
  ],
  () => {
    clearEarth()
  },
  { deep: true }
)

// 地球添加标记点
const infoMap = () => {
  earthData.pointArray.forEach((point) => threeMapId.value.infoMark(point))
}
// 删除地球标记点
const delInfoMarks = () => {
  earthData.pointArray.forEach((point) =>
    threeMapId.value.clearInfoMarks(point)
  )
}
window['clearInfoMarks'] = delInfoMarks

// 开启或关闭地球自动旋转
const rotationY = ref(false)
const rotationChange = () => {
  rotationY.value = !rotationY.value
  threeMapId.value.rotation(rotationY)
  // threeMapId.value.frameDivClose()
  earthData.rotation = rotationY.value == true ? '开启旋转' : '关闭旋转'
}

// 添加区域点
const createAreaPoint = () => {
  earthData.pointArray.forEach((point) =>
    setTimeout(() => threeMapId.value.createAreaPoint(point), 25)
  )
}
window['createAreaPoint'] = createAreaPoint
// 删除所有区域点
const delAreaPoint = () => {
  earthData.pointArray.forEach((point) =>
    threeMapId.value.delMark({ name: point.name })
  )
}
window['delAreaPoint'] = delAreaPoint

// 添加飞线infoFlyLine
const flyLineChange = () => {
  threeMapId.value.createFlyLine(earthData.coordinates)
}
// 删除所有飞行线
const delFlyLineChange = () => {
  threeMapId.value.clearFlyLines()
}
window['delFlyLineChange'] = delFlyLineChange

// 删除所有标记点
const delAllChange = () => {
  earthData.pointArray.forEach((point) => threeMapId.value.delAll(point))
}
window['delAllChange'] = delAllChange

// 移动相机
const cameraPos = (item) => {
  threeMapId.value.cameraPos(item)
}
window['cameraPos'] = cameraPos
// 添加光柱infoColumn
// const columnChange = () => {
//   earthData.pointArray.forEach((point) => threeMapId.value.infoColumn(point))
// }
// window['columnChange'] = columnChange

// 添加标签
// const createLabelObj = () => {
//   earthData.pointArray.forEach((point) =>
//     threeMapId.value.createLabelObj(point)
//   )
// }

// 删除指定标记点
// const delMarkChange = () => {
//   let item = {
//     name: '',
//   }
//   threeMapId.value.delMark(item)
// }
</script>

<template>
  <WorldCom ref="threeMapId" />
</template>

<style lang="scss" scoped>
.home {
  width: 100vw;
  // height: calc(100vh - 75px);
  height: 100vh;
}

$color1: #e6e53c; // 亚太
$color2: #3ce648; // 欧亚
$color3: #3cbce6; // 美洲
$color4: #e6843c; // 非洲
$color5: #ff0000; // 中国
</style>
